<template>
  <div class="china"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import * as echarts from 'echarts'
import chinaJson from '@/map/json/china.json'
import chinaJs from '@/map/js/china.js'

let $router = useRouter()
let $route = useRoute()

const initDate = () => {
  let myChart = echarts.init(document.querySelector('.china'))
  echarts.registerMap('china', chinaJson)
  let option = {
    tooltip: {},
    // 视觉映射组件
    visualMap: {
      min: 0,
      max: 18,
      left: 'left',
      top: 'bottom',
      text: ['多', '少'],
      inRange: {
        color: ['#cbe2e4', '#597e82']
      },
      show: true
    },
    // 地理坐标系组件
    geo: {
      map: 'china',
      // 开启缩放和平移
      roam: true,
      zoom: 1.2,
      label: {
        normal: {
          show: true,
          fontSize: 10,
          color: '#28414a'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: '#daf3ef',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 30,
          borderWidth: 0,
          shadowColor: '#28414a'
        }
      }
    },
    // 鼠标悬浮提示框
    series: [
      {
        type: 'map',
        geoIndex: 0,
        data: chinaJs
      }
    ]
  }
  myChart.setOption(option)
  myChart.on('click', function (params) {
    $router.push({
      path: '/location/province',
      query: { ename: params.data.ename, name: params.data.name }
    })
  })
}

onMounted(() => {
  initDate()
})
</script>
<style scoped lang="scss">
.china {
  height: 100%;
  width: 100%;
}
</style>